<template>
  <div class="role">
    <div class="container">
      <div class="bread">
        <el-breadcrumb separator="/" class="datails_nav">
          <el-breadcrumb-item :to="{ path: '/' }">
            <el-icon><HomeFilled /></el-icon>首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>特色服务</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="Tec-contract">
        <div class="imgcontainer">
          <img
            data-v-072d7d60=""
            src="../../assets/tesebg.jpg"
            alt=""
            class="play"
          />
        </div>
        <div class="content">
          <p class="contentTitle">技术合同</p>
          <div class="bcEnglish">TECHNICAL CONTRACT</div>
          <p class="contentTxt">
            技术合同是当事人就技术开发、转让、咨询或者服务订立的确立相互之间权利和义务的合同。技术合同的特征主要有：技术合同的标的与技术有密切联系，是提供技术的行为；技术合同履行环节多，履行期限长；价款、报酬或使用费的计算较为复杂；法律调整具有多样性（受专利法、商业秘密法、反不正当竞争法、著作权法等法律的调整和约束）；当事人一方具有一定专业知识或技能的技术人员；技术合同是双方、有偿合同。
          </p>
          <div class="service">
            <img
              data-v-072d7d60=""
              src=""
              alt=""
            />

            <span data-v-072d7d60="">技术合同登记咨询</span>
            <p class="servicePhone">
              河南农业大学（站点编号4101-23） 电话 565-2825
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="Classification">
      <div class="container">
        <h3 class="hbold">技术合同分类</h3>
        <ul data-v-072d7d60="">
          <li class="" @click="toclick">
            <img
              data-v-072d7d60=""
              class="img1"
              src=""
              alt=""
            />
            <img
              class="img2"
              src=""
              alt=""
            />
            <h3 data-v-072d7d60="">技术合同登记</h3>
            <p data-v-072d7d60="">
              一方当事人（受托方）为另一方（委托方）就特定技术项目提供可行性论证、技术预测、专题技术调查、分析评价报告等所订立的合同。
            </p>
          </li>
          <li class="" @click="toclick">
            <img
              data-v-072d7d60=""
              class="img1"
              src=""
              alt=""
            />
            <img
              class="img2"
              src=""
              alt=""
            />
            <h3 data-v-072d7d60="">横向科研经费划拨</h3>
            <p data-v-072d7d60="">
              当事人之间就新技术、新产品、新工艺、新材料、新品种及其系统的研究开发所订立的合同。包括合作开发和委托开发合同。
            </p>
          </li>
          <li class="" @click="toclick">
            <img
              data-v-072d7d60=""
              class="img1"
              src=""
              alt=""
            />
            <img
              class="img2"
              src=""
              alt=""
            />
            <h3 data-v-072d7d60="">科技成果转化</h3>
            <p data-v-072d7d60="">
              当事人之间就专利权转让、专利申请转让、专利实施许可、技术秘密转让所订立的合同。是现有的、特定的、权力化的技术在不同的法律主体之间的转移。
            </p>
          </li>
          <li class="" @click="toclick">
            <img
              data-v-072d7d60=""
              class="img1"
              src=""
              alt=""
            />
            <img
              class="img2"
              src=""
              alt=""
            />
            <h3 data-v-072d7d60="">中介服务</h3>
            <p data-v-072d7d60="">
              一方当事人（委托方）以技术知识为另一方（委托方）解决特定技术问题所订立的合同。包括技术中介、技术培训合同。
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="policy">
      <div class="container">
        <h3 class="hbold">技术合同登记可享受的政策</h3>
        <div class="txt1">
          <p data-v-072d7d60="">
            ①
            经登记备案、通过免税审核的技术开发和技术转让合同，可免征增值税。（依据《关于全面推开营业税改征增值税试点的通知》（财税[2016]36号）)
          </p>
          <p data-v-072d7d60="">
            ②
            经登记备案、通过免税审核的技术转让合同，免征、减征企业所得税（依据：1.主席令63号《企业所得税法》2.国务院令第512《企业所得税法实施条例》3.国税函[2009]212号4.财税[2010]111号5.国税公告2013年第62号）
          </p>
          <p data-v-072d7d60="">③ 技术服务、技术咨询合同暂无税收优惠。</p>
        </div>
        <div class="img1">
          <p data-v-072d7d60="">税收优惠</p>
          <img
            data-v-072d7d60=""
            src=""
            alt=""
          />
        </div>
        <div class="img2">
          <p class="pTitle">技术转移奖补</p>
          <p class="PTxt">
            （依据《郑州市科技成果转移转化补助实施细则》（郑科规{2019}2号））
          </p>
          <img
            data-v-072d7d60=""
            src=""
            alt=""
          />
        </div>
        <div class="txt2">
          <p data-v-072d7d60="">
            ①
            针对技术开发和技术转让合同，依据上年度总技术交易额的1‰给予奖励，同一单位最高不超过50万元；技术服务和技术咨询合同按实际到款额0.5‰给予补助，同一单位最高补助10万元。
          </p>
          <p data-v-072d7d60="">
            ②
            鼓励企业引进先进技术成果在我市转移转化，按照上年度技术转让合同实际付款额5%给予补助，单个技术合同补贴不超过20万元，同一单位年度最高补助100万元。
          </p>
          <p data-v-072d7d60="">
            ③
            对促成技术转移转化的技术转移服务机构，按照技术合同交易额的3%给予补助，同一技术转移服务机构每年补助金额不超过100万元。
          </p>
          <p data-v-072d7d60="">
            ④
            鼓励国（境）外各类组织和机构在郑州市设立或共建国际技术转移机构，对其促成的国际技术合同，按照交易额的10%进行补助，单个机构年最高补助金额不超过100万元。
          </p>
        </div>
      </div>
    </div>
    <div class="conditions">
      <div class="container">
        <h3 class="hbold">技术合同登记申报条件</h3>
        <p data-v-072d7d60="">
          依据《中华人民共和国合同法》的规定，签定的技术开发、技术转让、技术咨询和技术服务合同，并使用中华人民共和国科学技术部印制的格式文本（格式文本可在
          中国技术市场管理促进中心官http://210.76.97.54/downfile.htm下载）。
        </p>
      </div>
    </div>
    <div class="regProcess">
      <div class="container">
        <h3 class="hbold">技术合同登记流程</h3>
        <img src="../../assets/liuchengtu.png" alt="" />
        <div class="material">
          <h3 class="hbold">办理材料</h3>
          <div class="materials">
            <div class="mLeft">
              <img
                data-v-072d7d60=""
                src="../../assets/liuchengtu2.png"
                alt=""
              />
            </div>
            <div class="mRight">
              <div class="first">
                <h4 data-v-072d7d60="">01 首次办理</h4>
                <p class="option">需提供:</p>
                <p class="option">① 企业营业执照（复印件加盖公章)</p>
                <p class="option">② 法人身份证复印件</p>
                <p class="option">
                  在河南省生产力促进中心登记处备案并注册账号和密码
                </p>
              </div>
              <div class="first">
                <h4 data-v-072d7d60="">02 非首次办理</h4>
                <p class="option">需提供:</p>
                <p class="option">
                  ①
                  技术合同原件1份及复印件2份（合同复印件需在封面加盖公章并加盖骑缝章）
                </p>
                <p class="option">
                  ②《河南省技术合同认定登记申请表》2份（可从中国技术市场管理促进中心官网
                  http://210.76.97.54/downfile.htm
                  下载）申请表需具备三章一字即公章、财务章、法人章及财务或经办人签字
                </p>
                <p class="option"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tips">
      <div class="container">
        <h4 class="hbold notice">注意事项</h4>
        <p data-v-072d7d60="">
          1.申请认定登记的技术合同应当是依法已经生效的合同。
        </p>
        <p data-v-072d7d60="">
          2.具备完整的书面合同文本和相关附件。印章不齐备或者印章与书写名称不一致，不予登记。
        </p>
        <p data-v-072d7d60="">
          3.合同主体不明确的，标的不明确的，价款、报酬、使用费等约定不明确的，不予以登记。
        </p>
      </div>
    </div>
    <div class="down">
      <p class="u-m-tb-30">下载专区</p>
      <div class="downbox">
        <div class="downitem pointer">
          <a
            href="/wordfile/技术咨询合同.doc"
            download="/wordfile/技术咨询合同.doc"
            >技术咨询合同.doc</a
          >
        </div>
        <div class="downitem pointer">
          <a
            href="/wordfile/技术开发（合作）合同.doc"
            download="/wordfile/技术开发（合作）合同.doc"
            >技术开发（合作）合同.doc</a
          >
        </div>
        <div class="downitem pointer">
          <a
            href="/wordfile/技术开发（委托）合同.doc"
            download="/wordfile/技术开发（委托）合同.doc"
            >技术开发（委托）合同.doc</a
          >
        </div>
        <div class="downitem pointer">
          <a
            href="/wordfile/技术转让（技术秘密）合同.doc"
            download="/wordfile/技术转让（技术秘密）合同.doc"
            >技术转让（技术秘密）合同.doc</a
          >
        </div>
        <div class="downitem pointer">
          <a
            href="/wordfile/技术转让（专利权）合同.doc"
            download="/wordfile/技术转让（专利权）合同.doc"
            >技术转让（专利权）合同.doc</a
          >
        </div>
        <div class="downitem pointer">
          <a
            href="/wordfile/技术转让（专利实施许可）合同.doc"
            download="/wordfile/技术转让（专利实施许可）合同.doc"
            >技术转让（专利实施许可）合同.doc</a
          >
        </div>
        <div class="downitem pointer">
          <a
            href="/wordfile/技术服务合同.doc"
            download="/wordfile/技术服务合同.doc"
            >技术服务合同.doc</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import bus from "@/utils/bus";
import myinfo from "@/setting";
import search from "./search.vue";
import { ref } from "vue";
import { ArrowRight, HomeFilled } from "@element-plus/icons-vue";
const current = ref(0);
const getSonValue = (e: any) => {
  console.log(e); //子组件传入的值
};

const toclick = () => {
  let token = localStorage.getItem("token");
  if (token) {
    window.open(myinfo.backurl + token, "_blank");
  } else {
    bus.emit("Amessage", true);
  }
};
const changeitem = (e: number) => {
  current.value = e;
};
</script>
<style lang="scss" scoped>
.role {
  .container {
    font-size: 16px;
    width: 1400px;
    margin: 0 auto;
    font-family: Microsoft YaHei;
    .Tec-contract {
      display: flex;
      .imgcontainer {
        cursor: pointer;
        width: 649px;
        margin-right: 51px;
        padding: 25px 0 9px;
        position: relative;
      }
      img {
        width: 649px;
        height: 365px;
      }
      .content {
        margin-top: 17px;
        text-align: left;
        width: 700px;
        position: relative;
        .bcEnglish {
          position: absolute;
          top: -7px;
          left: 0;
          text-align: left;
          font-size: 50px;
          font-family: PingFang SC;
          color: #273b55;
          opacity: 0.05;
        }
        .contentTitle {
          font-size: 38px;
          font-weight: 700;
          color: #333;
          margin-bottom: 27px;
        }
        .contentTxt {
          color: #888;
          line-height: 30px;
        }

        .service {
          margin-top: 47px;
          img {
            vertical-align: middle;
            margin-right: 10px;
            width: 26px;
            height: 26px;
            margin-top: -3px;
          }
          span {
            padding-top: 2px;
            font-size: 20px;
          }
          .servicePhone {
            margin-top: 19px;
          }
        }
      }
    }
  }
  .Classification {
    margin-top: 47px;
    background: #f9f9f9;

    .container {
      overflow: hidden;
    }
    h3 {
      margin-top: 60px;
      font-size: 38px;
      color: #333;
      margin-bottom: 46px;
      font-weight: 700;
      text-align: center;
    }
    ul {
      display: flex;
      margin-bottom: 60px;

      li {
        cursor: pointer;
        width: 327px;
        height: 380px;
        padding-top: 44px;
        margin-right: 31px;
        background: #fff;
        box-shadow: 0 3px 26px rgba(0, 0, 0, 0.08);
        text-align: center;
        p {
          line-height: 26px;
          text-align: left;
          padding: 0 24px;
          width: 280px;
          margin: 0 auto;
          color: #666;
        }
        img {
          width: 65px;
          height: 67px;
        }
        h3 {
          margin-top: 28px;
          margin-bottom: 27px;
          font-size: 28px;
          color: #333;
          font-weight: 400;
        }
        .img1 {
          display: inline-block;
        }
        .img2 {
          display: none;
        }
        &:hover {
          z-index: 33;
          background: #2769dc;
          box-shadow: 0 3px 26px rgba(0, 0, 0, 0.08);
          opacity: 0.8;
          h3,
          p {
            color: #fff;
          }
          .img1 {
            display: none;
          }
          .img2 {
            display: inline-block;
          }
        }
      }
    }
  }

  .policy {
    height: 901px;
    margin-bottom: 37px;
    background: #fff;

    .container {
      position: relative;
      height: 100%;
      h3 {
        margin-top: 60px;
        color: #333;
        margin-bottom: 70px;
        font-weight: 700;
        font-size: 38px;
        text-align: center;
      }
      .txt1 {
        position: absolute;
        top: 180px;
        left: 0;
        width: 689px;
        p {
          line-height: 32px;
          text-align: left;
          margin-bottom: 20px;
        }
      }
      .img1 {
        position: absolute;
        width: 620px;
        height: 264px;
        background-color: rgba(39, 130, 220, 0.1);
        top: 180px;
        right: 0;
        text-align: center;
        p {
          margin-top: 47px;
          margin-bottom: 24px;
          font-size: 25px;
          color: #2769dc;
          opacity: 1;
        }
        img {
          width: 91px;
          height: 83px;
        }
      }
      .img2 {
        position: absolute;
        width: 620px;
        height: 320px;
        top: 521px;
        left: 0;
        background-color: rgba(39, 130, 220, 0.1);
        text-align: center;
        p {
          color: #2769dc;
          opacity: 1;
        }
        .pTitle {
          margin-top: 59px;
          margin-bottom: 26px;
          font-size: 25px;
        }
        img {
          width: 91px;
          height: 83px;
          margin-top: 34px;
        }
      }
      .txt2 {
        width: 689px;
        position: absolute;
        top: 521px;
        right: 0;
        p {
          line-height: 32px;
          text-align: left;
          margin-bottom: 20px;
        }
      }
    }
  }

  .conditions {
    overflow: hidden;
    height: 276px;
    background: #f9f9f9;
    p {
      padding: 0 106px;
      text-align: center;
      width: 1168px;
    }
    h3 {
      margin-top: 60px;
      color: #333;
      margin-bottom: 50px;
      font-weight: 700;
      font-size: 38px;
      text-align: center;
    }
  }

  .regProcess {
    overflow: hidden;
    background: #fff;
    h3 {
      margin-top: 60px;
      color: #333;
      margin-bottom: 73px;
      font-weight: 700;
      font-size: 38px;
      text-align: center;
    }
    img {
      margin-bottom: 60px;
      width: 100%;
    }
    .material {
      overflow: hidden;
      height: 720px;
      margin-bottom: 60px;
      background: url(../../assets/liucheng-bg.png) no-repeat 50%;
      background-size: cover;
      h3 {
        margin-top: 60px;
        margin-bottom: 50px;
        font-weight: 700;
        font-size: 38px;
        color: #fff;
      }
      .materials {
        display: flex;
        .mLeft {
          margin-left: 54px;
          margin-right: 43px;
          width: 701px;
          height: 467px;
        }
        .mRight {
          .first {
            margin-bottom: 31px;
            .option {
              width: 558px;
              margin-bottom: 5px;
              font-size: 18px;
              text-align: left;
              color: #fff;
            }
            h4 {
              margin-top: 0;
              width: 180px;
              height: 36px;
              background: #fff;
              font-weight: 400;
              border-radius: 18px;
              font-size: 20px;
              color: #2769dc;
              line-height: 36px;
              margin-bottom: 21px;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .tips {
    overflow: hidden;
    background: #f6f6f6;
  }

  .tips .container {
    margin-top: 60px;
    margin-bottom: 60px;
    background: #fff;
    box-shadow: 0 3px 26px rgba(0, 0, 0, 0.04);
    border-radius: 3px;
    padding: 28px;
  }

  .tips .container .notice {
    margin: 0;
    margin-bottom: 24px;
  }

  .tips .container h4 {
    color: #333;
    text-align: left;
    font-size: 20px;
  }

  .tips .container p {
    text-align: left;
    margin-bottom: 5px;
    color: #666;
    line-height: 32px;
  }

  .hbold {
    font-weight: 700;
  }

  .content {
    width: 1400px;
    margin: 50px auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .contentitem {
      display: flex;
      align-items: center;
      padding: 30px;
      width: 45%;
      background: url("../../assets/特色服务/serve.png") no-repeat;
      background-size: 100% 100%;
      justify-content: space-between;
      img {
        width: 230px;
        height: 200px;
      }
      .contentitem_text {
        display: flex;
        flex-direction: column;
        align-items: start;

        .title {
          letter-spacing: 1px;
          font-weight: bold;
          font-size: 24px;
          white-space: nowrap;
        }

        .look {
          font-size: 16px;
          font-weight: bold;
          padding: 10px 20px;
          background-color: rgb(30, 134, 249);
          color: #fff;
          text-align: center;
        }
      }
    }
  }

  .down {
    width: 1400px;
    box-sizing: border-box;
    margin: 0px auto;
    p {
      font-size: 20px;
      font-weight: bold;
    }
    .downbox {
      width: 100%;
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-around;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      .downitem {
        font-size: 16px;
        width: 100%;
        position: relative;
        margin: 30px 0px;

        &::before {
          position: absolute;
          content: "";
          width: 10px;
          height: 10px;
          border: 1px solid #000;
          border-radius: 50%;
          left: -20px;
          top: 5px;
        }
      }
      .active {
        color: $text-color;
        &::before {
          position: absolute;
          content: "";
          width: 10px;
          height: 10px;
          border: 1px solid $text-color;
          border-radius: 50%;
          left: -20px;
          top: 5px;
        }
      }
    }
  }
}
</style>
